<template>
    <div>
        <img id="saearch_mes_img" src="../../assets/logo.png" alt="">
        <h3>当前搜索：</h3>
        <div id="content"> {{$route.query.keyword}}</div>
        <h3 id="hotsear">热门搜索</h3>
        <div id="redline"></div>
       
            <div id="hightline" v-for="(item,index) in hots">
                <!-- <div id="inbox"> -->
                <router-link :to="{path:'/yunyin/white',query:{keyword:item.first}}"> <span>{{ index+1}}. {{item.first}}</span>
                 <span class="fire">&#xe608;</span></router-link>
                <!-- </div> -->
            </div>
            <div id="outbox">
                   <div id="hightline" v-for="(item,index) in hots2">
                   <router-link :to="{path:'/yunyin/white',query:{keyword:item.first}}"> <span>{{ index+6}}. {{item.first}}</span>
                    <span class="fire">&#xe608;</span></router-link>
            </div>
            </div>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'searchmes',
    data(){
        return{
            hots:'',
            hots2:'',
        }
    },
    mounted:function(){
        this.loading();
    },
    methods:{
        loading(){
            let that=this;
            axios.get("http://39.101.203.189:3000/search/hot").then(function(response) {
                        console.log(response.data.result.hots);
                        let res=response.data.result.hots;
                        that.hots=res.slice(0,5);
                        that.hots2=res.slice(6,11);
                        // console.log(that.hots[1].first)
                    }, function(err) {})
        }
    }
}
</script>

<style scoped>
a{
    text-decoration: none;
    color: aliceblue;
    z-index: 100000;
}
 #saearch_mes_img {
     position: relative;
     top: 10px;
     left: 0px;
     max-width: 180px;
     max-height: 300px;
     color: aliceblue;
 }
 h3{
     position: relative;
     top:10px;
     left: 0px;
     color: aliceblue;
 }
 #content{
     position: relative;
     width: 300px;
     left: 30px;
     color: aliceblue;
     font-size: 32px;
     font-weight: 400;
      
 }
 #hotsear{
     top:30px;
 }
 #redline{
     position: relative;
     left: 90px;
     height: 5px;
     width: 220px;
     background-color:#44060d;
     opacity: 0.8;
 }
 #hightline{
     position: relative;
     top:30px;
     left: 0px;
     color:aliceblue;
     font-size: 16px;
     font-weight: 400;   
     line-height: 32px;
     display:block;
 }
 #outbox{
     position: relative;
     width: 120px;
     top:-165px;
     left: 180px;
     display: block;
     z-index: 1;
 }

 .fire{
  
  font-family: "iconfont" !important;
  font-size: 16px;
  color: #960617;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
 }

</style>